<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contatos</title>
<link href="css/geral.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery.js"  type="text/javascript"></script>
<script language="JavaScript" src="js/biblioteca.js"    type="text/javascript"></script>
<script>
$(function(){
	$("#fixo").html( $("#box_fixo").html() );
	var pos_fixo = $("#box_fixo").first().offset().top;
	
	$(window).scroll(function(){
		var scroll_pos = $(window).scrollTop();
		if(scroll_pos >= pos_fixo){
			$("#fixo").show();
		}else{
			$("#fixo").hide();
		}
	});
});

function criar_lista(){
	bi.LightboxExibe({lightbox: "criar_lista"});
	return false;
}

function resumo(){
	bi.LightboxExibe({lightbox: "janela_resumo"});
	return false;
}
</script>
</head>

<body>

<!--Inicio [lightbox]-->
<div id="criar_lista" class="lightbox" style="display: none;">
	<span class="titulo">
    	<h1>Criar Contato</h1>
        <span class="fechar"><a href="#" class="botao_fechar"></a></span>
    </span>
    <span class="hr"></span>
    <br />
    <div class="grupo">
    
        <span class="subtitulo"><h3>Dados usuário:</h3></span>
        <span class="hr"></span>

        <span class="item">
            <span class="lbl"><h3>Matrícula</h3></span>
            <span class="inp"><input type="text" name="matricula" id="matricula" value=""></span>
        </span>

        <span class="item">
            <span class="lbl"><h3>Nome</h3></span>
            <span class="inp"><input type="text" name="nome" id="nome" value=""></span>
        </span>

        <span class="item">
            <span class="lbl"><h3>E-mail</h3></span>
            <span class="inp"><input type="text" name="email" id="email" value=""></span>
        </span>
        
        <span class="subtitulo"><h3>Localização:</h3></span>
        <span class="hr"></span>

        <!--<br /><br />
        <span class="subtitulo">
        	<h2>Filtros:</h2>
            <span class="filtro"><span class="seta_c"></span></span>
        </span>
        <span class="hr"></span>-->

        <span class="item">
            <span class="lbl"><input type="checkbox" /><h3>Regional</h3></span>
            <span class="inp">
                <!--<select name="operadora" id="operadora" multiple="multiple" style="width: 250px;">
                    <option>TIM Leste A4</option>                   
                    <option>TIM Leste A9</option>                    
                    <option>TIM Nordeste</option>
				</select>-->
                <span class="select">
                	<span class="opt">
                        <input type="checkbox" />
                        <span class="txt">TIM Leste A4 nonon onono non nono nonono nono no</span>
                    </span>
                    <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A5</span></span>
                    <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A6</span></span>
                    <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A7</span></span>
                    <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A8</span></span>
                    <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A9</span></span>
                    <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A10</span></span>
                </span>
            </span>
        </span>

        <span class="item">
            <span class="lbl"><input type="checkbox" /><h3>UF</h3></span>
            <span class="inp">
                <!--<select name="operadora" id="operadora" multiple="multiple" style="width: 250px;">
                    <option>Rio de Janeiro</option>                   
                    <option>São Paulo</option>                    
                    <option>Alagoas</option>
				</select>-->
                <span class="select">
                	<span class="opt">
                        <input type="checkbox" />
                        <span class="txt">Rio de Janeiro</span>
                    </span>
                    <span class="opt"><input type="checkbox" /><span class="txt">São Paulo</span></span>
                </span>
            </span>
        </span>

        <span class="item">
            <span class="lbl"><input type="checkbox" /><h3>DDD</h3></span>
            <span class="inp">
                <!--<select name="ddd" id="ddd" multiple="multiple" style="width: 250px;">
                    <option>11</option>                   
                    <option>21</option>                    
                    <option>40</option>
				</select>-->
                <span class="select">
                	<span class="opt">
                        <input type="checkbox" />
                        <span class="txt">11</span>
                    </span>
                    <span class="opt"><input type="checkbox" /><span class="txt">21</span></span>
                    <span class="opt"><input type="checkbox" /><span class="txt">41</span></span>
                </span>
            </span>
        </span>
        
        <span class="subtitulo"><h3>Outros:</h3></span>
        <span class="hr"></span>
        
        <span class="item">
            <span class="lbl"><h3>Área / Canal</h3></span>
            <span class="inp">
                <select name="area" id="area">
                    <option>Tim Store</option>                   
                    <option>Boc</option>                    
                    <option>Local Marketing and Support</option>
				</select>
            </span>
        </span>

        <span class="item">
            <span class="lbl"><h3>Cargo</h3></span>
            <span class="inp">
                <select name="cargo" id="cargo">
                    <option>Supervisor</option>                   
                    <option>Diretor</option>                    
                    <option>Area Manager / Dealer Manager</option>
				</select>
            </span>
        </span>

        <div class="botoes">
            <a href="#" class="botao ico"><span class="save"></span><span class="txt">Salvar</span></a>
        </div>
    </div>
</div>
<!--Fim [lightbox]-->

<!--Inicio [lightbox]-->
<div id="janela_resumo" class="lightbox" style="display: none;">
	<span class="titulo">
    	<h1>Resumo</h1>
        <span class="fechar"><a href="#" class="botao_fechar"></a></span>
    </span>
    <span class="hr"></span>
    <br />
    <div class="grupo resumo">

        <span class="subtitulo"><h3>Dados usuário:</h3></span>
        <span class="hr"></span>

        <span class="quad"> 
            <span class="lbl"><h3>Matrícula:</h3></span>       
            <span class="txt"><h3>F0129209104</h3></span>      
        </span>

        <span class="quad"> 
            <span class="lbl"><h3>Nome:</h3></span>       
            <span class="txt"><h3>Fulano de Tal</h3></span>      
        </span>

        <span class="quad"> 
            <span class="lbl"><h3>E-mail:</h3></span>       
            <span class="txt"><h3>fulano@timbrasil.com</h3></span>      
        </span>

        <span class="quad"> 
            <span class="lbl"><h3>Data modificação:</h3></span>       
            <span class="txt"><h3>15/10/2014</h3></span>      
        </span>
		
        <span class="subtitulo"><h3>Localização:</h3></span>
        <span class="hr"></span>
        
        <span class="quad"> 
            <span class="lbl"><h3>Regional:</h3></span>       
            <span class="txt"><h3>Tim Rio, Tim São Paulo, Tim Leste</h3></span>      
        </span>
        
        <span class="quad"> 
            <span class="lbl"><h3>UF:</h3></span>       
            <span class="txt"><h3>Rio de Janeiro, São Paulo</h3></span>      
        </span>

        <span class="quad"> 
            <span class="lbl"><h3>DDD:</h3></span>       
            <span class="txt"><h3>11, 21, 41</h3></span>      
        </span>
		
        <span class="subtitulo"><h3>Outros:</h3></span>
        <span class="hr"></span>
        
        <span class="quad"> 
            <span class="lbl"><h3>Área / Canal:</h3></span>       
            <span class="txt"><h3>Tim Store</h3></span>      
        </span>

        <span class="quad"> 
            <span class="lbl"><h3>Cargo:</h3></span>       
            <span class="txt"><h3>Supervisor</h3></span>      
        </span>
     
    </div>
</div>
<!--Fim [lightbox]-->

<!--Inicio [pag]-->
<div class="pag pag_contato">
	<!--Inicio [pag_banner]-->
    <div class="pag_banner">
    	<span class="wrap">
        	<span class="titulo">Projeto Informativo</span>
        </span>
    </div>
    <!--Fim [pag_banner]-->
    
    <div id="fixo" class="normal fixed" style="display: none; z-index: 11;"></div>
    
    <!--Inicio [pag_fixo]-->
    <div class="normal" id="box_fixo">
    
        <!--Inicio [pag_usuario]-->
        <div class="pag_usuario">
            <span class="wrap">
                <span class="logo"><img src="imgs/logo_tim.png" /></span>
                <span class="grupo">
                    <span class="nome"><h2>rubia@timbrasil.com.br</h2></span>
                    <a href="#" class="sair ico"><span class="logout"></span><span class="txt">Sair</span></a>
                </span>
            </span>
        </div>
        <!--Fim [pag_usuario]-->
        
        <!--Inicio [pag_menu]-->
        <div class="pag_menu">
            <span class="wrap">
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="contatos.html" class="sel">Contatos</a></li>
                    <li><a href="campanhas.html">Campanhas</a></li>
                    <li><a href="comunicados.html">Comunicados</a></li>
                    <li><a href="templates.html">Templates</a></li>
                </ul>
            </span>
        </div>
        <!--Fim [pag_menu]-->
    
    </div>
    <!--Fim [pag_fixo]-->
    
    <br />
    
    <!--Inicio [pag_body]-->
    <span class="pag_body">
    	<span class="wrap">
    		<span class="titulo">
            	<span class="ball"><span class="contatos"></span></span>
                <h1>Contatos</h1>
            </span>
		</span>
	</span>
    
    <span class="pag_body">
    	<span class="wrap">
            <span class="subtitulo pointer">
            	<h2>Critérios de pesquisa:</h2>
                <span class="filtro"><span class="seta_c"></span></span>
            </span>
            <span class="hr"></span>
            
            <div class="grupo">
            	<br />
                
                <span class="subtitulo"><h3>Dados usuário:</h3></span>
                <span class="hr"></span>

                <span class="item">
                    <span class="lbl"><h3>Matrícula</h3></span>
                    <span class="inp"><input type="text" name="filtro_matricula" id="filtro_matricula" value=""></span>
                </span>

                <span class="item">
                    <span class="lbl"><h3>Nome</h3></span>
                    <span class="inp"><input type="text" name="filtro_nome" id="filtro_nome" value=""></span>
                </span>

                <span class="item">
                    <span class="lbl"><h3>E-mail</h3></span>
                    <span class="inp"><input type="text" name="filtro_email" id="filtro_email" value=""></span>
                </span>
                
                <!--<span class="item">
                    <span class="lbl"><h3>Data modificação</h3></span>
                    <span class="inp"><input type="text" name="filtro_data" id="filtro_data" value="26/09/2014" style="width:123px;"></span>
                </span>-->

                <span class="subtitulo"><h3>Localização:</h3></span>
                <span class="hr"></span>

                <span class="item">
                    <span class="lbl"><input type="checkbox" /><h3>Regional</h3></span>
                    <span class="inp">
                        <!--<select name="operadora" id="operadora" multiple="multiple" style="width: 250px;">
                            <option>TIM Leste A4</option>                   
                            <option>TIM Leste A9</option>                    
                            <option>TIM Nordeste</option>
                        </select>-->
                        <span class="select">
                            <span class="opt">
                                <input type="checkbox" />
                                <span class="txt">TIM Leste A4 nonon onono non nono nonono nono no</span>
                            </span>
                            <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A5</span></span>
                            <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A6</span></span>
                            <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A7</span></span>
                            <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A8</span></span>
                            <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A9</span></span>
                            <span class="opt"><input type="checkbox" /><span class="txt">TIM Leste A10</span></span>
                        </span>
                    </span>
                </span>
        
                <span class="item">
                    <span class="lbl"><input type="checkbox" /><h3>UF</h3></span>
                    <span class="inp">
                        <!--<select name="operadora" id="operadora" multiple="multiple" style="width: 250px;">
                            <option>Rio de Janeiro</option>                   
                            <option>São Paulo</option>                    
                            <option>Alagoas</option>
                        </select>-->
                        <span class="select">
                            <span class="opt">
                                <input type="checkbox" />
                                <span class="txt">Rio de Janeiro</span>
                            </span>
                            <span class="opt"><input type="checkbox" /><span class="txt">São Paulo</span></span>
                        </span>
                    </span>
                </span>
        
                <span class="item">
                    <span class="lbl"><input type="checkbox" /><h3>DDD</h3></span>
                    <span class="inp">
                        <!--<select name="ddd" id="ddd" multiple="multiple" style="width: 250px;">
                            <option>11</option>                   
                            <option>21</option>                    
                            <option>40</option>
                        </select>-->
                        <span class="select">
                            <span class="opt">
                                <input type="checkbox" />
                                <span class="txt">11</span>
                            </span>
                            <span class="opt"><input type="checkbox" /><span class="txt">21</span></span>
                            <span class="opt"><input type="checkbox" /><span class="txt">41</span></span>
                        </span>
                    </span>
                </span>
                
                <span class="subtitulo"><h3>Outros:</h3></span>
                <span class="hr"></span>
                
                <span class="item">
                    <span class="lbl"><h3>Área / Canal</h3></span>
                    <span class="inp">
                        <select name="area" id="area">
                            <option>Tim Store</option>                   
                            <option>Boc</option>                    
                            <option>Local Marketing and Support</option>
                        </select>
                    </span>
                </span>
        
                <span class="item">
                    <span class="lbl"><h3>Cargo</h3></span>
                    <span class="inp">
                        <select name="cargo" id="cargo">
                            <option>Supervisor</option>                   
                            <option>Diretor</option>                    
                            <option>Area Manager / Dealer Manager</option>
                        </select>
                    </span>
                </span>
                
                <div class="botoes">
                    <a href="#" class="botao ico"><span class="search"></span><span class="txt">Buscar</span></a>
                </div>
            </div>
		</span>
	</span>

    <span class="pag_body">
    	<span class="wrap">        
            <span class="subtitulo"><h2>Lista de contatos:</h2></span>
            <span class="hr"></span>
            <br />
            <table class="tabela" border="0" cellspacing="0" cellpadding="0">
            	<tr class="head">
                	<td width="10%"><h3>Matrícula</h3></td>
                	<td width="28%"><h3>Nome</h3></td>
                    <td width="30%"><h3>E-mail</h3></td>
                    <td width="10%"><h3>Data modificação</h3></td>
                    <td width="7%"><h3>Status</h3></td>
                    <td width="12%"><h3>Ação</h3></td>
                </tr>
                <tr>
                	<td><h3>F012345678</h3></td>
                    <td><h3>Júlia Vieira</h3></td>
                    <td><h3>juvieira@timbrasil.com.br</h3></td>
                    <td><h3>26/09/2014</h3></td>
                    <td><h3>Ativo</h3></td>
                    <td>
                    	<!--tooltipx="dir" tooltip="<table cellpadding='0' cellspacing='0'> <tr> <td class='lbl'>Perfil :</td> <td>PME</td> </tr> <tr> <td class='lbl'>Telefone :</td> <td>12345678</td> </tr> </table>"-->
                    	<a href="#" class="botao ico" onclick="return resumo();"><span class="info"></span></a>
                    	<a href="#" class="botao ico" title="Editar"><span class="edit"></span></a>
                        <a href="#" class="botao ico" title="Opções" onclick="return bi.Menu({el: this, pos: 'td', opcoes: ['Ativar', 'Desativar'], funcao: ['', '']});"><span class="gear"></span></a>
                    </td>
                </tr>
                <tr>
                	<td><h3>F098765432</h3></td>
                    <td><h3>Hélio Augusto</h3></td>
                    <td><h3>helioau@timbrasil.com.br</h3></td>
                    <td><h3>26/09/2014</h3></td>
                    <td><h3>Inativo</h3></td>
                    <td>
                    	<a href="#" class="botao ico" onclick="return resumo();"><span class="info"></span></a>
                    	<a href="#" class="botao ico" title="Editar"><span class="edit"></span></a>
                        <a href="#" class="botao ico" title="Opções" onclick="return bi.Menu({el: this, pos: 'td', opcoes: ['Ativar', 'Desativar'], funcao: ['', '']});"><span class="gear"></span></a>
                    </td>
                </tr>
            </table>
                        
            <div class="botoes">
            	<a href="#" class="botao ico" onclick="return criar_lista();"><span class="plus"></span><span class="txt">Criar contato</span></a>
            </div>
            
            <div class="paginacao">
            	<span class="grupo">
                    <a href="#" onclick="return paginacao(1)">&lt;</a>
                    <a href="#" onclick="return paginacao(1)">1</a>
                    <a href="#" class="sel" onclick="return paginacao(2)">2</a>
                    <a href="#" onclick="return paginacao(3)">3</a>
                    <a href="#" onclick="return paginacao(3)">&gt;</a>
                </span>
            </div>
            
            <!--<span style="position: relative; display: block; height: 700px;"></span>-->
        </span>
    </span>
    <!--Fim [pag_body]-->
    
    <!--Inicio [pag_foot]-->
    <!--<div class="pag_foot">
    	<span class="wrap">
    		<a href="#">Algum link</a>
            <a href="#">Outra informação</a>
        </span>
    </div>-->
    <!--Fim [pag_foot]-->
</div>
<!--Fim [pag]-->

</body>

</html>
